import { h, render } from 'vue'
import XtxMessage from './message.vue'
type Props = {
  type: 'success' | 'error' | 'warning'
  text: string
  duration?: number //可不传
}
//创建一个盒子，并给盒子设类名，为了好找到
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message')
document.body.appendChild(div) //需要添加到document上才有效果
// 导出一个函数
export default function Message({ type, text, duration = 2000 }: Props) {
  const vNode = h(XtxMessage, { type, text }) //用h函数创建一个虚拟dom
  render(vNode, div) // 需配合用render函数渲染到页面中，参数1是虚拟dom，参数2是真实的dom--作为虚拟dom的挂载点
  // 关闭弹窗，用了定时器，--给render传的虚拟dom为null即可，并接收显示时间
  setInterval(() => {
    render(null, div)
  }, duration)
}
// 函数也是方法，也可以添加方法，则为了更方便调用，给函数增加了方法
Message.success = function (text: string, duration = 2000) {
  Message({
    type: 'success',
    text,
    duration,
  })
}
Message.error = function (text: string, duration = 2000) {
  Message({
    type: 'error',
    text,
    duration,
  })
}
Message.warning = function (text: string, duration = 2000) {
  Message({
    type: 'warning',
    text,
    duration,
  })
}
